﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginPage.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My E-Family</title>
    <link rel="stylesheet" href="Content/ControlStyles.css" type="text/css" media="screen" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="Scripts/PopupWindow.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="Scripts/jquery-masked-textbox.js"></script>
    <script>
        var previousStyle; //Variable that holds the previous textbox style/color
        //Function that runs when the document loads
        $(document).ready(function () {
            $('#createPageB').click(function () { //Registers button click event
                $('#content').dialog({ //Dialog box that opens with user information
                    autoOpen: true,
                    height: 470,
                    width: 700,
                    modal: true,
                    show: 'slow',
                    hide: 'slow',
                    resizable: false,
                    buttons: {
                        "Create": function () {
                            CreateUser();
                        },
                        "Cancel": function () { //Closes dialog box when clicked
                            $('#content').dialog("close");
                        }
                    }
                }).parent().appendTo("form"); //Appends to the form so the server can process data
                previousStyle = document.getElementById("emailTF").currentStyle; //Gets the previous style and stors it in variable
                jQuery(function ($) {
                    $('#phoneNumTF').mask("(999)999-9999"); //Masks the phone number box
                });
                return false;
            });
        });
        //Function that returns all of the data typed in as an object used for processing
        function GetUserData()
        {
            var firstName = $('#firstNameTF').val();
            var lastName = $('#lastNameTF').val();
            var emailAddress = $('#emailTF').val();
            var password = $('#createPasswordTF').val();
            var address = $('#addressTF').val();
            var city = $('#cityTF').val();
            var state = $('#statesCB').val();
            var phoneNum = $('#phoneNumTF').val();
            var zip = $('#zipTF').val();
            var carrier = $('#carrierCB').val();

            var data = new Object();
            data.jFirstName = firstName;
            data.jLastName = lastName;
            data.jEmailAddress = emailAddress;
            data.jPassword = password;
            data.jAddress = address;
            data.jCity = city;
            data.jState = state;
            data.jPhoneNum = phoneNum;
            data.jZip = zip;
            data.jCarrier = carrier;

            return data; //returns the object for processing
        }
        //Function that queries the database to see if that email address exists or not
        function CheckUserExists()
        {
            var user = $('#emailTF').val();
            var params = new Object();
            
            params.jEmailAddress = user;
            $.ajax({
                type: "POST",
                url: "LoginPage.aspx/CheckUserExists",
                data: JSON.stringify(params),
                contentType: "application/json",
                dataType: "json",
                success: function (exists) { //Returns the result for client to process
                    if (exists.d == true) { //If the user exists display a message and change textbox style
                        alert("I'm sorry but " + user + " already exists");
                        $('#emailTF').focus();
                        document.getElementById("emailTF").style.background = "#FF0000";
                    }
                    else { //Change the element back to its original form
                        document.getElementById("emailTF").currentStyle = previousStyle;
                        document.getElementById("emailTF").style.backgroundColor = "White";
                    }
                },
                error: function () {
                    alert("Unable to obtain information from server");
                }
            });
        }
        //Function that creates the user with AJAX call
        function CreateUser()
        {
            var params = JSON.stringify(GetUserData()); //Uses the GetUserData function that returns a data object
            $.ajax({ //Ajax call that creates the user in SQL database
                type: "POST",
                url: "LoginPage.aspx/CreateUser",
                data: params,
                contentType: "application/json",
                dataType: "json",
                success: function () { //Displays message account was created and closes the box
                    alert("Account created");
                    $('#content').dialog("close");
                },
                error: function (xhr, errorType, exception) { //Displays error message
                    var errorMessage = exception || xhr.statusText;
                    alert(errorMessage);
                }
            });
        }
    </script>
</head>
<body>
   <form id="form1" runat="server">
    <div align="center">
        <img src="Images/family.jpg" style="width: 15%; height: 15%; position: static; top: 166px; left: -235px;" /><h2 style="position: static; margin-left: 9px; top: 160px; left: 906px; width: 175px; height: 28px; margin-bottom: 7px;">My E-Family</h2>
    &nbsp;<div style="height: 88px; width: 50%; position: relative;" align="center" class="shadow">
        <table style=" width: 50%; alignment-adjust:central">
            <tr>
                <td style="width:20%; text-align: left">Email:</td>
                <td style="width:70%">
                    <asp:TextBox ID="userTF" runat="server" Width="100%"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width:20%; text-align:left">Password:</td>
                <td style="width:30%">
                    <asp:TextBox ID="passwordTF" runat="server" TextMode="Password" Width="100%"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width:30%"></td>
                <td  style="border-style: outset none none none; border-top-width: 3px; width: 30%; padding-top: 5px; text-align: left">
                    <asp:Button ID="loginB" runat="server" Text="Login" BorderStyle="NotSet" OnClick="loginB_Click"  CssClass="button"/>
                </td>
            </tr>
            <tr>
                <td></td> <!--Empty Element-->
                <td style="text-align: left">
                    <asp:Button ID="createPageB" runat="server" CssClass="button" Text="Create New Account" />
                </td>
            </tr>
        </table>
        <div>
            <asp:Label ID="messageL" Text="" runat="server" Visible="True"></asp:Label>
        </div>
    </div>
    </div>
       <div id="content" title="Account Creation" style="display: none">
        <table id ="createTable" cellpadding="4">
            <tr>
                <td>First Name:</td>
                <td>
                    <asp:TextBox ID="firstNameTF" runat="server"></asp:TextBox>
                </td>
                <td>Last Name:</td>
                <td style="text-align: right">
                    <asp:TextBox ID="lastNameTF" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Email Address:</td>
                <td colspan="3">
                    <asp:TextBox ID="emailTF" runat="server" Width="100%" onBlur="Javascript:CheckUserExists();"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Email Password:</td>
                <td>
                    <asp:TextBox ID="createPasswordTF" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Address:</td>
                <td colspan="3">
                    <asp:TextBox ID="addressTF" runat="server" Width="100%"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <asp:TextBox ID="cityTF" runat="server"></asp:TextBox>
                </td>
                <td>State:</td>
                <td style="text-align: right">
                    <asp:DropDownList ID="statesCB" runat="server" Width="100%"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>Cell Number:</td>
                <td>
                    <asp:TextBox ID="phoneNumTF" ClientIDMode="Predictable" runat="server" TextMode="SingleLine"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>ZIP:</td>
                <td>
                    <asp:TextBox ID="zipTF" runat="server" TextMode="SingleLine"></asp:TextBox>
                </td>
                <td>Carrier:</td>
                <td style="text-align: right">
                    <asp:DropDownList ID="carrierCB" runat="server" Width="100%"></asp:DropDownList>
                </td>
            </tr>
        </table>
    </div>
    <div style="position: absolute; bottom: 0px; right: 8px">
        <p>Last Updated 9/27/2012</p>
    </div>
    </form>
</body>
</html>
